<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="bcid" onclick="func1()">不要学编程</div>
    <script>
        document.write('<p>事件的绑定：就是给元素添加一个事件，让它做什么事情。事件的绑定有三种方法，传统的绑定方法有两种，第三种是事件的监听。</p>')
        document.write('<p>传统的事件绑定方法：</p>')
        document.write('<p>传统的事件绑定方式的优点：能够兼容低版本的浏览器。</p>')
        document.write('<p style="color:blue;">传统的事件绑定方式的注意事项：<br>1、事件名称之前一定要加上 on；<br>2、兼容主流的浏览器，包括低版本的IE。</p>')
        document.write('<p style="color:red;">方法一：行内绑定：即在元素中，将事件以元素属性的形式进行一个绑定，事件的属性值就是这个事件的函数。</p>')
        document.write('<p>语法：事件 = "函数"</p>')
        document.write('<p>行内样式绑定的缺点：如果元素中还有其它的属性，或者样式，那么整个元素标签就会显得很臃肿，维护起来会很困难，不利于维护。</p>')
        function func1(){
            // alert('行内绑定事件')
            //Math.random() 产生的随机数是0~1之间的随机数
            document.getElementById('bcid').innerText = '行内绑定事件' + Math.floor(Math.random()*10);
        };
        
        document.write('<p style="color:red;">方法二：动态绑定：</p>')
        window.onload = function (){
            var a = document.getElementById('bcid');
            a.onmouseout = function (){
                // alert('动态绑定事件');
                a.innerText = '动态绑定事件' + Math.floor(Math.random()*10);
            }
        }
    </script>
    <style>
        #bcid{
            width:500px;
            height:300px;
            background-color:red;
            margin:0 auto;
        }
    </style>
</body>
</html>